<template>
  <div class="uni-full-map">
    <el-dialog
      :fullscreen="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="visible">
        <span slot="title" class="uni-title uni-flex">
          <el-radio-group v-model="objType" size="small" @change="changeDraw">
            <el-tooltip effect="dark" content="绘制线" placement="bottom">
              <el-radio-button label="line">
                <i class="iconfont icon-xian"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="绘制面" placement="bottom">
              <el-radio-button label="area">
                <i class="iconfont icon-mian"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="绘制阻断墙" placement="bottom">
              <el-radio-button label="wall">
                <i class="iconfont icon-fanghuoqiang"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="编辑线属性" placement="bottom">
              <el-radio-button label="editdraw">
                <i class="iconfont icon-bianji"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="结束绘制, 按Q快捷结束" placement="bottom">
              <el-radio-button label="nodraw">
                <i class="iconfont icon-close"></i>
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>
          <el-tooltip effect="dark" content="当前绘制点的高度, 按键W加,S减高度" placement="bottom" style="margin-left: 10px;">
              <div class="uni-flex">
                <el-input v-model="offsetZ" size="medium" :disabled="offsetZLock" style="width: 60px;margin-right: 5px; text-align: center;"> </el-input>
                <el-button type="text" @click="lockChange">{{offsetZLock ? '解锁' : '锁定'}}</el-button>
              </div>
          </el-tooltip>
          <el-radio-group v-model="cost" size="small" v-if="objType=='line' || objType=='area'" @change="changeDraw" style="margin-left: 20px;" :fill="getColorByCost(cost)">
            <el-tooltip effect="dark" content="行走正常难度" placement="bottom">
              <el-radio-button :label="1">
                <i class="iconfont icon-luxian"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="行走是正常2倍难度" placement="bottom">
              <el-radio-button :label="2">
                <i class="iconfont icon-luxian"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="行走是正常4倍难度" placement="bottom">
              <el-radio-button :label="4">
                <i class="iconfont icon-luxian"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="行走是正常8倍难度" placement="bottom">
              <el-radio-button :label="8">
                <i class="iconfont icon-luxian"></i>
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>

          <el-radio-group v-model="dir" size="small" v-if="objType=='line'" @change="changeDraw" style="margin-left: 20px;" fill="#5e9efb">
            <el-tooltip effect="dark" content="双向可行走" placement="bottom">
              <el-radio-button :label="0">
                <i class="iconfont icon-jiantou_zuoyouqiehuan"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="开始-结束可行走" placement="bottom">
              <el-radio-button :label="1">
                <i class="iconfont icon-jiantou_xiangyou"></i>
              </el-radio-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="结束-开始可行走" placement="bottom">
              <el-radio-button :label="2">
                <i class="iconfont icon-jiantou_xiangzuo"></i>
              </el-radio-button>
            </el-tooltip>
          </el-radio-group>

          <div class="uni-select-group" v-if="objType=='nodraw'">
            <el-select @change="changeMap" v-model="mapType" placeholder="选择地图">
              <el-option v-for="item in $dictUtils.getDictList('map_type')" :key="item.value"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select @change="changeRoad" v-model="roadName"  placeholder="选择路网">
              <el-option v-for="item in $dictUtils.getDictList('road_name')" :key="item.value"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          </el-button-group>
          <el-button-group style="margin-left: 20px;">
            <el-tooltip effect="dark" content="清空" placement="bottom">
              <el-button icon="iconfont icon-delete" type="primary" size="small" @click="clearDraw"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="复制默认路网" placement="bottom" v-if="roadName != 'jflu'">
              <el-button icon="iconfont icon-copy" type="primary" size="small" @click="copyDraw"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="保存" placement="bottom">
              <el-button icon="iconfont icon-baocun" type="primary" size="small" @click="submit"></el-button>
            </el-tooltip>
          </el-button-group>
        </span>
        <div :id="mapId" class="uni-map"></div>
        <div class="uni-edit-panel" v-if="objType=='editdraw' && (edit.areaId || edit.lineId || edit.pointId)">
          <div class="uni-edit-head">路线编辑</div>
          <div class="uni-edit-body">
            <div class="uni-edit-row" v-if="edit.areaId">
              当前编辑面：{{edit.areaId}}
            </div>
            <div class="uni-edit-row" v-else-if="edit.lineId">
              当前编辑线：{{edit.lineId}}
            </div>
            <div class="uni-edit-row" v-else-if="edit.pointId">
              当前编辑点：{{edit.pointId}}
            </div>
            <div class="uni-edit-row" v-if="edit.pointId">
              <label style="margin-right: 20px;">全部点?</label>
              <el-radio-group v-model="edit.isEditAll">
                <el-radio v-for="item in this.$dictUtils.getDictList('yes_no')" :label="item.value" :key="item.id">{{item.label}}</el-radio>
              </el-radio-group>
            </div>
            <div class="uni-edit-row" v-if="edit.pointId">
              <label style="margin-right: 20px;">点高度</label>
              <el-input-number style="width: 150px;" size="medium" v-model="edit.offsetZ" @change="changePoints"></el-input-number>
              <div class="uni-notice">输入高度后，点击点自动设置成当前高度</div>
            </div>
            <div class="uni-edit-row" v-if="edit.lineId || edit.areaId">
              <label>行走难度</label>
              <el-radio-group v-model="edit.cost" size="small" @change="changeDraw" style="margin-left: 20px;" :fill="getColorByCost(cost)">
                <el-tooltip effect="dark" content="行走正常难度" placement="bottom">
                  <el-radio-button :label="1">
                    <i class="iconfont icon-luxian"></i>
                  </el-radio-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="行走是正常2倍难度" placement="bottom">
                  <el-radio-button :label="2">
                    <i class="iconfont icon-luxian"></i>
                  </el-radio-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="行走是正常4倍难度" placement="bottom">
                  <el-radio-button :label="4">
                    <i class="iconfont icon-luxian"></i>
                  </el-radio-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="行走是正常8倍难度" placement="bottom">
                  <el-radio-button :label="8">
                    <i class="iconfont icon-luxian"></i>
                  </el-radio-button>
                </el-tooltip>
              </el-radio-group>
            </div>
            <div class="uni-edit-row" v-if="edit.lineId">
              <label>线路方向</label>
              <el-radio-group v-model="edit.dir" size="small" @change="changeDraw" style="margin-left: 20px;" fill="#5e9efb">
                <el-tooltip effect="dark" content="双向可行走" placement="bottom">
                  <el-radio-button :label="0">
                    <i class="iconfont icon-jiantou_zuoyouqiehuan"></i>
                  </el-radio-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="开始-结束可行走" placement="bottom">
                  <el-radio-button :label="1">
                    <i class="iconfont icon-jiantou_xiangyou"></i>
                  </el-radio-button>
                </el-tooltip>
                <el-tooltip effect="dark" content="结束-开始可行走" placement="bottom">
                  <el-radio-button :label="2">
                    <i class="iconfont icon-jiantou_xiangzuo"></i>
                  </el-radio-button>
                </el-tooltip>
              </el-radio-group>
            </div>
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as HMAP from '../../../../components/jfMap/hmap.manage.js'
  export default {
    data () {
      return {
        visible: false,
        editVisible: true,
        mapId: 'maproad_' + Math.random().toString(36).substr(2),
        mapManager: null,
        floorId: null,
        roadName: 'jflu',
        objType: 'nodraw',
        offsetZ: 0,
        offsetZLock: false,
        cost: HMAP.RoadCost.Normal,						// 选填：走这条线耗时倍数
        dir: HMAP.RoadDirection.TwoWay,				// 选填：路径的方向
        inputForm: {
        },
        mapType: 'map_file',
        edit: {
          areaId: null,
          lineId: null,
          objId: 'jflu',
          cost: 1,
          dir: 0,
          offsetZ: 0,
          isEditAll: '0'
        }
      }
    },
    activated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(true)
      }
    },
    deactivated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(false)
      }
    },
    beforeDestroy () {
      console.log("beforeDestroy")
      if (this.mapManager) {
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    methods: {
      init (row) {
        this.visible = true;
        this.inputForm = row
        this.$nextTick(()=>{
          if(!this.mapManager) {
            this.mapManager = new HMAP.Hmap(this.mapId, {
            	mapStorage: false, // 使用地图缓存功能，加快加载速度
              minTiltAngle: 30,
            	viewMode: HMAP.ViewMode.Mode_3D, 	// 初始二维还是三维状态,默认是3D状态
               maxDistance: 2000000,               // 摄像头最远距离
            });
            this.mapManager.on("onMapClick", (e)=>{
              if(!this.offsetZLock) {
                if(e.object && e.object.fenceType == "point") {
                  this.offsetZ = parseInt(e.object.position.z)+5;
                } else if(e.position) {
                  this.offsetZ = parseInt(e.position.z)+5;
                }
                this.changePointZ()
              }
            })

            this.mapManager.on("onFenceEdit", (e)=>{
              this.edit.objId = e.objId;
              this.edit.areaId = e.areaId;
              this.edit.lineId = e.lineId;
              this.edit.pointId = e.pointId;
              // this.edit.cost = e.cost;
              // this.edit.dir = e.dir;
              if(e.pointId) {
                this.mapManager.changePointZ(parseInt(this.edit.offsetZ), this.offsetZLock);
              }
              if(e.lineId) {
                this.mapManager.changeDraw(this.edit)
              }
              // if(this.edit.lineId || this.edit.areaId) {
              //   this.mapManager.changeDraw(this.edit)
              // } else {
              //   this.mapManager.editDraw();
              // }
              // console.log(e);
            })
            this.mapManager.on("keydown", (e)=>{
              if(e.keyCode == 87) {
                this.offsetZ++
                this.changeDraw()
                this.changePointZ()
              } else if(e.keyCode == 83){
                this.offsetZ--
                this.changeDraw()
                this.changePointZ()
              } else if(e.keyCode == 81){
                // Q
                this.objType = "nodraw";
                this.changeDraw("nodraw")
              }
            })
          }
          this.mapManager.clearDrawAll();
          this.objType = "nodraw";
          this.mapManager.stopDraw();
          this.offsetZ = 0;
          this.cost = HMAP.RoadCost.Normal;					// 选填：走这条线耗时倍数
          this.dir = HMAP.RoadDirection.TwoWay;				// 选填：路径的方向
          this.changeMap(this.mapType);
        })
      },
      changePoints(e) {
        if(this.edit.isEditAll == '1') {
          this.mapManager.changeAllPointZ(this.roadName, parseInt(this.edit.offsetZ), this.offsetZLock);
        }
      },
      lockChange() {
        this.offsetZLock = !this.offsetZLock
        this.changePointZ()
      },
      changeRoad(e) {
        this.mapManager.hideDrawAll();
        this.mapManager.showDraw(e)
      },
      changeMap(e) {
        this.showFloor(this.inputForm)
        if(this.inputForm.road && this.inputForm.road != '') {
          var road = JSON.parse(this.inputForm.road);
          this.mapManager.setDrawJson(road);
          this.mapManager.showDraw(this.roadName)
          if(road[this.roadName]) {
            this.offsetZ = road[this.roadName].offsetZ;
            this.offsetZLock = road[this.roadName].offsetZLock;
          }
        }
        this.mapManager.setMapWork(true);
      },
      copyDraw() {
        // 复制默认路网
        if(this.inputForm.road && this.inputForm.road != '') {
          var roadNet = JSON.parse(this.inputForm.road);
          if(!roadNet["jflu"]) {
            this.$message.error("默认路网不存在");
            return;
          }
          roadNet[this.roadName] = JSON.parse(JSON.stringify(roadNet["jflu"]));
          roadNet[this.roadName].objId = this.roadName;
          this.mapManager.setDrawJson(roadNet);
          this.mapManager.showDraw(this.roadName)
        } else {
          this.$message.error("默认路网不存在");
        }
      },
      changeDraw(e) {
        if(this.objType == 'nodraw') {
          this.edit.lineId = ''
          this.edit.areaId = ''
          this.mapManager.stopDraw();
        } else if(this.objType == 'editdraw') {
          if(this.edit.lineId || this.edit.areaId) {
            this.mapManager.changeDraw(this.edit)
          } else {
            this.mapManager.editDraw();
          }
        } else {
          this.edit.lineId = ''
          this.edit.areaId = ''
          this.mapManager.startDraw({
          	objId: this.roadName,
          	objType: this.objType,
          	floorId: this.floorId,
            offsetZLock: this.offsetZLock, // 是否锁定z坐标
            offsetZ: parseInt(this.offsetZ),
            cost: this.cost,						// 选填：走这条线耗时倍数
            dir: this.dir,				// 选填：路径的方向
          })
        }
      },
      clearDraw() {
        this.mapManager.clearDrawById(this.roadName);
      },
      changePointZ() {
        this.mapManager.changePointZ(parseInt(this.offsetZ), this.offsetZLock);
      },
      submit() {
        this.loading = true
        this.inputForm.road = JSON.stringify(this.mapManager.getDrawJson());
        this.$http({
          url: `/smis/floor/jfFloor/save`,
          method: 'post',
          data: this.inputForm
        }).then(({data}) => {
          if (data && data.success) {
            // this.visible = false
            this.$message.success(data.msg)
          }
          this.loading = false
        })
      },
      getColorByCost(cost) {
      	if(cost == HMAP.RoadCost.Normal) {
      		return "#0c910f";
      	} else if(cost == HMAP.RoadCost.Cost2) {
      		return "#f97315";
      	} else if(cost == HMAP.RoadCost.Cost4) {
      		return "#ff0404";
      	} else if(cost == HMAP.RoadCost.Cost8) {
      		return "#620707";
      	}
      	return "#0c910f";
      },
      showFloor(row) {
        if(!this.mapManager) {
          return;
        }
        var mapFile = row.mapFile;
        if(this.mapType == 'ibeacon_map') {
          mapFile = row.ibeaconMap;
        } else if(this.mapType == 'vr_map') {
          mapFile = row.vrMap;
        } else {
          mapFile = row.mapFile;
        }
        if(!mapFile || mapFile == "") {
          this.$message.error("暂无该类型地图，请选用其他地图")
          return;
        }
        this.mapManager.clearDrawAll();
        this.mapManager.removeFloor(row.id)
        this.floorId = row.id;
        this.mapManager.addFloor({
        	floorId: row.id,  				// 必须：楼层Id
        	floorName: row.name,			// 必须：楼层名称
        	floorHeight: 0,						// 必须: 楼层展示的z坐标
        	floorMap: mapFile,		// 必须: 地图文件
        	buildingName: '',					// 必须: 所属楼宇
			longitude: row.longitude,
			latitude: row.latitude
        })
        this.mapManager.showFloors([row.id]);
        this.mapManager.spreadMap({
        	spreadRatio: 0, 									// 伸缩倍数
        	duration: 0.3,											// 动画秒数
					rotateAngle: row.singleRotateAngle,	// 地图旋转角度
					tiltAngle: 90,										// 地图到xy面的角度
					distance: row.singleCameraDis,									// 摄像头距离中心点距离
					targetX: row.centerX,									   		// 目标点X轴
					targetY: row.centerY,									   		// 目标点Y轴
					targetZ: 0,                                       // 目标点Z轴
        })
      }
    }
  }
</script>
<style lang="less">
  .uni-select-group {
    .el-input__inner {
      height: 36px;
      line-height: 36px;
      border-radius: 0;
      border: none;
      font-size: 13px;
    }
    .el-select {
      border-right: 1px solid #DCDFE6;
      width: 110px;
    }
    .el-select:last-child {
      border: none;
    }
    margin-left: 20px;
    border: 1px solid #DCDFE6;
    border-radius: 5px;
    overflow: hidden;
  }
</style>
<style lang="less" scoped="scoped">
  .uni-map {
    width: 100%;
    height: 100%;
  }
  .uni-title {
    align-items: center;
  }
  .uni-edit-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 310px;
    // bottom: 20px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 5px 0 #cccccc;
    border-radius: 6px;

    .uni-edit-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: left;
      padding: 0 10px;
      font-size: 14px;
      color: #ffffff;
      background-color: #3f8ef7;
      border: 2px solid #3f8ef7;
    }
    .uni-edit-body {
      padding: 20px 20px 10px;
      .uni-edit-row {
        margin-bottom: 15px;
      }
      .uni-notice {
        color: #fd8008;
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }
</style>
